<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
  import type { DepartData } from '@/types/consult'
  import { computed, ref } from 'vue'
  import { useAttrs } from 'vue'
  import { getDepartmentListApi } from '@/apis/consult'
  import { onLoad } from '@dcloudio/uni-app'

  const departmentList = ref<DepartData[]>([])
  const activeIndex = ref(0)
  // 获取科室列表
  onLoad(async () => {
    const res = await getDepartmentListApi()
    departmentList.value = res
  })
  //二级科室
  const secondaryDepartmentList = computed(() => {
    return departmentList.value[activeIndex.value]?.child || []
  })

  const handleDepartmentClick = (item: DepartData, index: number) => {
    activeIndex.value = index
  }

  const props = defineProps<{
    type: string
    illnessType: string
  }>()
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view
        class="department-item"
        :class="{ active: activeIndex === index }"
        v-for="(item, index) in departmentList"
        :key="item.id"
        @click="handleDepartmentClick(item, index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator
        hover-class="none"
        class="department-item"
        v-for="item in secondaryDepartmentList"
        :key="item.id"
        :url="`/subpkg_consult/description/description?type=${props.type}&illnessType=${props.illnessType}&childDepartment=${item.id}`"
      >
        {{ item.name }}
      </navigator>
      <view v-if="secondaryDepartmentList.length === 0" class="placeholder">
        <text class="placeholder-text">暂无科室</text>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './department.scss';

  .placeholder {
    padding: 30rpx 0;
    text-align: center;
  }
</style>
